<script lang="ts" setup>
import useUserStore from '@/stores/user'
import type { UploadRequestOptions } from 'element-plus'
import { uploadFile, getFilePath, submitPractise } from '@/api/upload'
// import { UploadFilled } from '@element-plus/icons-vue' // 引入图标组件
const userStore = useUserStore()
const userInfo = userStore.userInfo // 获取 token
const videoPath = userInfo.videoPath
console.log('videoPath', videoPath)
const videoUrl = ref<string | null>(videoPath)

// 定义对象类型
interface FilePath {
  name: string
  url: string
}

let fileParam: FilePath = {
  name: '',
  url: '',
}

// 处理文件选择
const handleFileChange = (file: File) => {
  if (file.raw && file.raw.type.startsWith('video/')) {
    videoUrl.value = URL.createObjectURL(file.raw) // 生成视频预览 URL
  }
}

// 文件上传前的校验
const beforeUpload = (file: File) => {
  const maxSize = 100 * 1024 * 1024 // 100MB

  if (!file.type.startsWith('video/')) {
    ElMessage.error('只能上传视频文件')
    return false
  }

  if (file.size > maxSize) {
    ElMessage.error('视频大小不能超过 100MB')
    return false
  }

  return true
}
// 将文件上传到阿里云，得到路径
const customUpload = async (params: UploadRequestOptions) => {
  const file = params.file as File
  const res = await uploadFile(file)
  fileParam = res.data
  // emit('upload', { name: res.data.name, url: res.data.url })
}
// 处理文件超出限制
const handleExceed = () => {
  showFailToast('最多只能上传一个文件')
}
const deleteFile = () => {
  videoUrl.value = null
  fileParam = { name: '', url: '' }
}
const submitUpload = async () => {
  // getFilePath
  if (!fileParam.url) {
    if (videoUrl.value) {
      showFailToast('未做任何更改！')
      return
    }
    showFailToast('请选择上传文件！')
    return
  }

  const res = await getFilePath({ filePath: fileParam.url })
  const taskId = res.data.taskId
  const submitRes = await submitPractise({
    groupingId: userInfo?.groupingId,
    videoPath: fileParam.url,
    taskId: taskId,
    studentId: userInfo?.studentId,
  })
  // console.log('submitRes', submitRes)
  if (submitRes.code == 200) {
    showSuccessToast('提交成功！')
  }
}
</script>

<template>
  <div class="practise-container">
    <el-card class="box-card">
      <div class="practise-title">小组练习</div>
      <div class="text item practise-info">
        <span class="title">姓名</span>
        <span>{{ userInfo?.studentName }}</span>
      </div>
      <div class="text item practise-info">
        <span class="title">组名</span>
        <span>{{ userInfo?.groupingName }}</span>
      </div>
    </el-card>
    <el-upload
      v-if="!videoUrl"
      class="upload-demo"
      drag
      :http-request="customUpload"
      :limit="1"
      :on-change="handleFileChange"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      accept="video/*"
      :show-file-list="false"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        <span class="upload-tip">点击上传视频文件</span>
        <div><span class="upload-sub-tip">支持MP4、AVI等格式，最大50MB</span></div>
      </div>
    </el-upload>
    <div class="upload-container" v-if="videoUrl">
      <van-icon name="cross" @click="deleteFile" />
      <video v-if="videoUrl" id="videoPreview" ref="videoPreview" :src="videoUrl" controls></video>
    </div>
    <van-button type="primary" @click="submitUpload">提交上传</van-button>
  </div>
</template>

<style lang="scss" scoped>
.practise-container {
  padding: 14px;
  .box-card {
    // padding: 21px;
  }
  .practise-title {
    height: 40px;
    font-size: 21px;
    font-weight: 600;
    line-height: 28px;
    border-bottom: 1px solid #e5e7eb;
  }
  .practise-info {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    .title {
      margin-right: 56px;
      color: #4b5563;
    }
  }
  .upload-demo {
    margin-top: 21px;
  }
  :deep(.el-upload-dragger) {
    border: 2px dashed #dcdfe6;
    padding: 25px 10px;
    .upload-tip {
      font-size: 14px;
      color: #4b5563;
    }
    .upload-sub-tip {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 7px;
    }
  }
  .van-button--primary {
    width: 100%;
    margin-top: 21px;
  }
  #videoPreview {
    // display: none;
    margin-top: 21px;
    width: 100%;
    /*height: 300px; /* 固定高度 */
    aspect-ratio: 16 / 9; /* 固定宽高比（16:9） */
    object-fit: cover; /* 保持比例不变形 */
    border-radius: 6px; /* 圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影 */
    border: 2px solid #ddd; /* 边框 */
  }
  .upload-container {
    position: relative;
    .van-icon-cross {
      position: absolute;
      font-size: 20px;
      right: 0px;
      top: 22px;
      color: rgb(251, 250, 250);
      z-index: 99;
    }
  }
}
</style>
